<template>
    <div class="search-view has-header">
        <div class="search">
            <form id="search-form" onsubmit="return false">
                <input type="search" name="query" v-model.trim.lazy="queryStr" placeholder="搜索 书 / 影 / 音">
                <button type="button" @click="search">搜索</button>
            </form>
        </div>
        <template v-if="showLoading">
            <Loading></Loading>
        </template>
        <template v-else>
            <template v-if="showResult">
                <SearchResultList :title="queryRes_movie.title" :items="queryRes_movie.subjects">
                    <template v-if="showLoadingMore">
                        <loading></loading>
                    </template>
                    <template v-else>
                        <a class="more" @click="getMore">查看更多</a>
                    </template>
                </SearchResultList>
            </template>
            <template v-else>
                <a class="noData">暂无搜索结果</a>
            </template>
        </template>
    </div>
</template>

<script>
import {mapState} from 'vuex'

import SearchResultList from '../components/SearchResultList'
import Loading from '../components/Loading'

export default {
    name: 'search-view',
    data(){
        return {
            queryStr: '',
            addCount: 8,
            showResult: false,
            showLoading: false,
            showLoadingMore: false
        }
    },
    components: {
        SearchResultList,
        Loading
    },
    computed: {
        ...mapState({
            queryRes_movie: state => state.search.queryRes_movie
        })
    },
    methods: {
        query: async function(){
            this.showLoading = true;
            let s =  await this.$store.dispatch({
                type: 'search/query',
                queryStr: this.queryStr,
            })
            if(this.queryRes_movie['subjects'].length > 0) {
                this.showResult = true;
            } else {
                this.showResult = false;
            }
        },
        search: function(){
            this.query().then((v) => {
                this.showLoading = false;
            }).catch((err) => {
                console.log(err);
            });
        },
        getMore: function(){
            this.showLoadingMore = true;
            this.$store.dispatch('search/loadMore', {
                queryStr: this.queryStr
            }).then((v)=>{
                this.showLoadingMore = false;
            })
        }
    },
    created: function(){
        const q = this.$route.params.q;
        if(q) {
            this.queryStr = q;
            this.search()
        }
        
    }
}
</script>

<style lang="scss" scoped>
.search {
    border-bottom: 0.1rem solid #ccc;
    padding: 1.7rem 2rem;
    overflow: hidden;
    form {
        input {
            width: 85%;
            height: 3rem;
            border: 0;
            outline: 0;
            color: #111;
            background: #ccc;
            font-size: 1.4rem;
            padding-left: 0.5rem; 
            border-radius: 0.5rem;
        }
        button {
            height: 3rem;
            border: 0;
            outline: 0;
            width: 10%;
            cursor: pointer;
        }
    }
}



.more {
    display: block;
    margin-bottom: 1.5rem;
    padding: 1.5rem 0;
    font-size: 1.6rem;
    color: #42bd56;
    text-align: center;
    cursor: pointer;
}

.noData {
    display: block;
    margin: 2rem 1.5rem;
    padding: 1.5rem 0;
    font-size: 1.6rem;
    color: red;
    text-align: center;
}

</style>
